<template>
	<view class="pages">
		<view class="topBgcBox"></view>
		<view class="swiperContent">
			<u-swiper :list="swiperList" previousMargin="10" nextMargin="10" circular radius="8"
				bgColor="rgba(255, 255, 255, 0)" indicatorMode="dot" :indicator="true" indicatorInactiveColor="#BBDEFB"
				indicatorActiveColor="#1065C0">
			</u-swiper>
		</view>
		<view class="mainContent">
			<view class="noticeBox">
				<u-notice-bar :text="noticeText"></u-notice-bar>
			</view>
			<view class="mainFunContent myboxShadow">
				<u-grid :border="false" @click="navClick" col="4">
					<u-grid-item v-for="(baseListItem,baseListIndex) in baseList" :key="baseListIndex">
						<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="baseListItem.name" :size="22"></u-icon>
						<text class="grid-text">{{baseListItem.title}}</text>
					</u-grid-item>
				</u-grid>
			</view>
			<view class="recentNewsBox myboxShadow">
				<view class="titleBox">最新资讯</view>
				<u-divider></u-divider>
				<view class="newListBox" v-for="(item, index) in newsList" :key="index" @click="navToNew(item.m_url)">
					<view class="newTitle">{{item.title}}</view>
					<image class="newImg" :src='item.imgsrc' mode="aspectFit"></image>
					<view class="newDigest">{{item.digest}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperList: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
				noticeText: '遇到凡事不要慌，奥里给',
				baseList: [{
						name: 'http://www.zhiyitimetable.cn/help/jinnang.png',
						title: '自救锦囊',
						url: '../home/saveOneself/saveOneself'
					},
					{
						name: 'http://www.zhiyitimetable.cn/help/liuyan.png',
						title: '留言板',
						url: '../home/messageBoard/messageBoard'
					},
					{
						name: 'http://www.zhiyitimetable.cn/help/didian.png',
						title: '避险地点',
						url: '../home/safePlace/safePlace'
					},
					{
						name: 'http://www.zhiyitimetable.cn/help/weixian.png',
						title: '危险地区',
						url: '../home/dangerWarn/dangerWarn'
					}
				],
				newsList: [],
			}
		},
		onLoad() {
			this.getNewList()
		},
		methods: {
			navClick(index) {
				// console.log("点击了第" + name + "个");
				uni.navigateTo({
					url: this.baseList[index].url
				})
			},
			getNewList() {
				uni.request({
					method: 'post',
					url: 'https://v2.alapi.cn/api/new/toutiao',
					data: {
						type: 1,
						page: 1,
						token: 'fVdUBheWDhnbCDWT'
					},
					success: (res) => {
						// console.log(res);
						if (res.data.code == 200) {
							this.newsList = res.data.data
						}
					}
				})
			},
			navToNew(src) {
				uni.navigateTo({
					url: './webNews?url=' + src
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #eff5f6;
	}

	.pages {
		overflow-x: hidden;
	}

	.topBgcBox {
		position: relative;
		right: 5%;
		height: 148.6rpx;
		width: 110%;
		background-color: #1565C0;
		border-radius: 0 0 110rpx 110rpx;
		z-index: -99;
	}

	.swiperContent {
		position: relative;
		top: -55px;
	}

	.mainContent {
		position: relative;
		top: -40px;
		padding: 0 26.22rpx;
	}

	.mainFunContent {
		background-color: #fff;
		margin-top: 26.22rpx;
		border-radius: 13.99rpx;
		padding: 17.48rpx 0px;
	}

	.grid-text {
		font-size: 14px;
		color: #626570;
		padding: 10rpx 0 20rpx 0rpx;
	}

	.recentNewsBox {
		padding: 26.22rpx;
		margin-top: 26.22rpx;
		background-color: #fff;
		border-radius: 8px;
	}

	.titleBox {
		font-size: 18px;
		font-weight: 600;
	}

	.newListBox {
		/* padding: 10px; */
		padding: 10px 0;
		display: flex;
		flex-direction: column;
		border-bottom: 1px solid #eff5f6;
		align-items: center;
	}

	.newTitle {
		font-size: 18px;
		font-weight: 600;
	}

	.newImg {
		margin-top: 8px;
		width: 100%;
	}

	.newDigest {
		overflow: hidden;
		overflow-wrap: break-word;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		text-indent: 2em;
		font-size: 15px;
		margin-top: 8px;
	}
</style>
